<!--
 * @Descripttion: 联系人组件
 * @version: V1.0
 * @Author: GW
 * @Date: 2021-09-09 14:18:01
 * @LastEditors: GW
 * @LastEditTime: 2021-10-13 10:50:12
-->
<template>
    <section class="show-wrapper">
        <template v-if="data">
            <div class="title-box" :class="data.onFill?'required':''">
                <span class="title-name">{{data.title?data.title:'手机'}}</span>
            </div>

            <template v-if="data.isSms == 1">
                <a-input size="large" type="input" v-model.trim="data.value"></a-input>
                <div v-show="isPhone" class="title-box" :class="data.onFill?'required':''">
                    <span class="title-name">图片验证码</span>
                </div>
                <a-input-search size="large" v-show="isPhone" v-model.trim="imgCode" placeholder="请输入图片验证码" @search="onSearch">
                    <a-button slot="enterButton" style="border:1px solid #a0a0a0;">
                        <img style="width:60px;height:28px;" :src="verifyCode" @click="referCode" />
                    </a-button>
                </a-input-search>

                <div class="title-box" :class="data.onFill?'required':''">
                    <span class="title-name">手机验证码</span>
                </div>
                <a-input-search size="large" type="number" v-model.trim="data.smsCode" @search="onSend">
                    <a-button slot="enterButton" style="border:1px solid #a0a0a0;">
                        {{msg}}
                    </a-button>
                </a-input-search>
            </template>

            <a-input v-else  size="large" type="input" v-model="data.value"></a-input>
        </template>
        <template v-else>
            <div class="title-box" :class="data.onFill?'required':''">
                <span class="title-name">手机</span>
            </div>
            <a-input size="large" type="input"></a-input>
        </template>

    </section>
</template>

<script>
import { sendSms } from "@/api/activity/activity"
export default {
    name: 'Inputfrom',
    props: {
        data: {
            type: Object,
            default: {}
        },
    },
    data () {
        return {
            msg: '发送验证码',
            isSend: false,
            isPhone: false,//手机号码是否正确

            verifyCode: null, //图片验证码地址
            imgCode: null,
            email: {
                reg: /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,
                message: "请输入正确的邮箱格式"
            },
            mobile: {
                reg: /^1[3456789]\d{9}$/,
                message: "请输入正确的手机号码"
            }
        }
    },
    mounted () {
        console.log(this.data);
        //组件默认数据
        let { data } = this;
        let defaultData = {
            title: data.title ? data.title : '手机',
            onEdit: true,
            isSms: data.isSms,//是否发送短信验证码 0否1是
            onFill: 1,//必填
            smsCode: data.smsCode,//短信验证码
        }
        this.data = Object.assign(data, defaultData);
    },
    methods: {
        onSend () {
            if (!this.data.value) {
                this.$message.warning(this.mobile.message);
                this.isPhone = false;
                return;
            } else if (this.data.value && !this.mobile.reg.test(this.data.value)) {
                this.$message.warning(this.mobile.message);
                this.isPhone = false;
                return;
            } else {
                this.isPhone = true;
            }

            if (!this.imgCode) {
                this.$message.warning('请输入图片验证码');
                this.referCode();
                return;
            }

            if (!this.isSend) {
                let postData = {
                    formId: this.$route.query.id,//
                    phone: this.data.value,//手机号
                    imgCode: this.imgCode,//图片验证码
                }
                try {
                    sendSms(postData).then(res => {
                        if (res.code === 200) {
                            this.$message.success('短信发送成功');

                            this.isSend = true;
                            let timer = 60;
                            let handleTimer = setInterval(() => {
                                timer--;
                                this.msg = timer + 's后重新获取';
                                if (timer == 0) {
                                    clearInterval(handleTimer);
                                    this.isSend = false;
                                    this.msg = '重新获取验证码';
                                }
                            }, 1000);
                        } else {
                            // this.$message.warning(res.message);
                            this.referCode();
                            this.isSend = false;
                        }
                    })
                } catch (error) {
                    this.referCode();
                    this.isSend = false;
                }

            }
        },
        referCode () {
            //刷新图片验证码
            if (!this.data.value) {
                this.$message.warning(this.mobile.message);
                this.isPhone = false;
                return;
            } else if (this.data.value && !this.mobile.reg.test(this.data.value)) {
                this.$message.warning(this.mobile.message);
                this.isPhone = false;
                return;
            } else {
                this.isPhone = true;
            }
            let time = new Date().getTime();
            this.$nextTick(() => {
                console.log(time);
                this.verifyCode = this.$Global.ApiBaseUrl + "/verifyCode/invitationImageCode?userPhone=" + this.data.value + "&timestamp=" + time;
            })
            this.$forceUpdate();
        }
    }
}
</script>

<style lang="less" scoped>
    .show-wrapper {
        padding:6px 12px;
        .title-box {
            position: relative;
            height: 32px;
            line-height: 32px;
            .title-name {
                color: #333;
            }
        }

        .required::after {
            position: absolute;
            content: '*';
            top: 2px;
            margin-left: 2px;
            font-size: 16px;
            color: red;
            font-family: 'SimSun,sans-serif';
        }
    }
</style>
<style scoped>
    .ant-input {
        border-radius: 0 !important;
    }
</style>